<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="shortcut icon" href="../image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4726301_bklsnefroh.css">
    <link rel="stylesheet" href="../style/public.css">
    <title>足迹</title>
    <style>
        .active {
            line-height: 40px;
            color: #367eab;
            border-bottom: 3px solid #367eab;
        }

        .item-top img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .item-cont img {
            width: 115px;
            height: 90px;
        }

        .video-img {
            width: 100%;
        }

        .video-btn {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 50%;
        }

        .video-time {
            bottom: 12px;
            right: 3px;
            color: #fff;
            padding: 4px;
            background-color: rgba(0, 0, 0, 0.3);
        }
        .shan {
            width: 40px;
            height: 20px;
            border-radius: 15px;
            background: #ff8200;
            color: #fff;
            right: 10px;
            top: 20px;
        }
    </style>
</head>

<body>
    <div class="content pl-10 pr-10 bafff">
        <div v-for="(item, index) in list" :key="item.id" class="item rel pt-10">
            <span class="abs shan fcc" @click="remove(item.id)">删除</span>
            <a :href="'./user-essay.html?id='+item.id">
                <div class="item-top fcb">
                    <div class=" fl aic">
                        <img :src="item.icon" alt="">
                        <p class="fl jcc fdc ml-10">
                            <span class="f15 fwb">{{ item.name }}</span>
                            <span class="c999 mt-5">{{ item.time }}</span>
                        </p>
                    </div>
                </div>
                <h2 class="mt-10 f14 fwb ovh2 lh13">{{ item.h1 }}</h2>
                <div v-if="item.url1" v-for="(item, index) in item.imgUrl" :key="index" class="fl mt-10 item-cont">
                    <img class="mr-5" :src="item.url1" alt="">
                    <img class="mr-5" :src="item.url2" alt="">
                    <img :src="item.url3" alt="">
                </div>
                <div v-if="item.videoUrl" class="fl rel">
                    <video class="video-img" :src="item.videoUrl" alt=""></video>
                    <div class="video-btn abs">
                        <i class="iconfont icon-bofang cfff"></i>
                    </div>
                    <div class="video-time abs fwb">{{ item.duration }}</div>
                </div>
                <div class="h30 bbs fcb">
                    <p class="fcc"><i class="iconfont icon-icon2 f15 mr-3"></i>{{ item.browses }}浏览</p>
                    <p class="fcc">
                        <span class="fcc mr-5"><i class="iconfont icon-pinglun f15 mr-3"></i>{{ item.comments }}</span>
                        <span class="fcc"><i class="iconfont icon-icon f15 mr-3"></i>{{ item.browse }}</span>
                    </p>
                </div>
            </a>
        </div>
    </div>



    <script src="../js/axios.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/vue2.js"></script>
    <script>
        const content = new Vue({
            el: '.content',
            methods: {
                remove(id) {
                    axios.delete(`http://localhost:3888/footprint/${id}`).then(() => {
                        // 删除成功后，从当前列表中移除对应的数据项
                        this.list = this.list.filter(item => item.id!== id);
                        console.log('数据删除成功');
                    }).catch(error => {
                        console.error('删除数据时出错：', error);
                    });
                }
            },
            data: {
                list: []
            },
            async created() {
                let response = await axios.get('http://localhost:3888/footprint');
                this.list = response.data;
            }
        });
    </script>
</body>

</html>